<template>
    <div>   
        <el-table
        height="700"
        :data="data"
        style="width: 100%">
            <el-table-column
            fixed
            prop="id"
            label="id"
            width="50">
            </el-table-column>
            <el-table-column
            prop="app_id"
            label="账号"
            width="100">
            </el-table-column>
            <el-table-column
            prop="nick_name"
            label="昵称"
            width="100">
            </el-table-column>
            <el-table-column
            prop="scope_description"
            label="权限"
            width="100">
            </el-table-column>
           
            <el-table-column
            fixed="right"
            label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    v-show='scope.row.onShow==1'
                    size="mini"
                    type='danger'
                    @click="handleDown(scope.$index, scope.row)">下架</el-button>
                    <el-button
                    v-show='scope.row.onShow==2'
                    size="mini"
                    type='success'
                    @click="handleDown(scope.$index, scope.row)">上架</el-button>

                    

                    <el-button
                    size="mini"
                    type="danger" 
                    plain
                    
                    
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        class='pagination'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[9]"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total">
        </el-pagination>

    </div>
</template>

<script>
import axios from 'axios'
import { mapState,mapMutations } from 'vuex'
export default {
    name:'GiftsTable',
    data() {
        return {
            
            data:[
               
            ],
            total:0,
            page: 1,
            size:9,
            
            
            
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    activated() {
        this.getListInfoByPage()
    },
    methods: {
        getListInfoByPage (){
            // console.log(this.baseUrl)
            // console.log(this.currentPage)
            axios.get(
               this.baseUrl+'cms/getAllAdmin',
                {
                     params:{
                        size:this.size,
                        page:this.page
                    }
                })
            .then(this.getInfoSucc)
        },
        getInfoSucc (response){
            // console.log(response.data)s
            this.data = response.data.data.data
            this.total = response.data.count
           this.page = parseInt(response.data.current_page)
            
        },
        handleSizeChange(val) {
            
            this.size = val
            this.getListInfoByPage()
        },
        handleCurrentChange(val) {
            this.page = val
            this.getListInfoByPage()
            
            
        },
       
         handleEdit(index, row) {
            console.log(index);
            console.log(row)
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        handleDown(index, row){
            console.log(index, row);
        }
    },
}
</script>

<style lang="stylus" scoped>
.pagination
    margin 0 auto
                .name-wrapper
                    display inline-block    
</style>
  